<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单元素拟态质感按钮</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		body{
			margin:0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background:#363636;
		}
		label{
			position:relative;
			width: 80px;
			height: 80px;
			cursor: pointer;
			border-radius: 50%;
		}
		label .btn{
			position:absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			background: #1b1b1b;
			border-radius: 50%;
			box-shadow:inset 0 2px 2px rgba(255,255,255,0.5),0 0 0 0 #000,0 0 0 #0c0c0c;
		}
		label input[type="checkbox"]{
			-webkit-appearance:none;
		}
		label .fa{
			position:absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			font-size: 2.5em;
			color: #363636;
		}
		label input[type="checkbox"]:checked~.fa{
			color:#00ffe7;
			text-shadow: 0 0 15px #00a1ff,0 0 30px #00a1ff;
		}
		label input[type="checkbox"]:checked~.btn{
			box-shadow: 0 0 0 rgba(0,0,0,1),inset 0 -2px 5px rgba(0,0,0,1),inset 0 0 0 rgba(255,255,255,0.1),0 0 0 2px #000,0 0 2px 5px aqua;
		}
	</style>
</head>

<body>
	<label for="in">
		<input type="checkbox" id="in">
		<span class="btn"></span>
		<i class="fa fa-power-off"></i>
	</label>
</body>
</html>
